<template>
	<div>
		<image :src="talent_img" style="width: 100%;height: 445rpx;" mode="aspectFill"></image>
		<view class="feedback-container" style="padding: 20rpx 70rpx;">
			<view style="line-height: 80rpx;font-size: 30rpx;font-weight: bold;" class="line1">PANART攀纳潮牌库-带货达人合作专栏</view>
			<view style="font-size: 22rpx;">我们对达人进行公开邀约，诚邀达人登记商谈，欢迎有趣有料有诚意的带货达人参与长期合作</view>
			<view style="font-size: 22rpx;margin-top: 40rpx;">请您认真填写表格所需信息，以便后期有效沟通，谢谢配合！</view>
			<form @submit="formSubmit">
				<view style="margin-top: 40rpx;">
					<view><text style="color: red;">*</text>一起玩儿/Cooperation</view>
					<radio-group @change="platChange">
						<view style="border: 1px solid #ccc;border-radius: 20rpx;padding: 15rpx;font-size: 24rpx;margin-top: 20rpx;">
							<view><text class="iconfont icon-xiangxia2" style="font-size: 24rpx;"></text>线上销售</view>
							<label style="float: left;width: 33%;margin-top: 20rpx;">
								<radio value="抖音" :checked="detail.plat == '抖音'" /><text style="margin-left: 10rpx;vertical-align: middle;">抖音</text>
							</label>
							<label style="float: left;width: 33%;margin-top: 20rpx;">
								<radio value="快手" :checked="detail.plat == '快手'" /><text style="margin-left: 10rpx;vertical-align: middle;">快手</text>
							</label>
							<label style="float: left;width: 33%;margin-top: 20rpx;">
								<radio value="淘宝/天猫" :checked="detail.plat == '淘宝/天猫'" /><text style="margin-left: 10rpx;vertical-align: middle;">淘宝/天猫</text>
							</label>
							<label style="float: left;width: 33%;margin-top: 20rpx;">
								<radio value="京东" :checked="detail.plat == '京东'" /><text style="margin-left: 10rpx;vertical-align: middle;">京东</text>
							</label>
							<label style="float: left;width: 33%;margin-top: 20rpx;">
								<radio value="得物(毒)" :checked="detail.plat == '得物(毒)'" /><text style="margin-left: 10rpx;vertical-align: middle;">得物(毒)</text>
							</label>
							<label style="float: left;width: 33%;margin-top: 20rpx;">
								<radio value="唯品会" :checked="detail.plat == '唯品会'" /><text style="margin-left: 10rpx;vertical-align: middle;">唯品会</text>
							</label>
							<label style="float: left;margin-top: 20rpx;">
								<view style="float: left;"><radio value="其他" :checked="detail.plat == '其他'" /><text style="margin-left: 10rpx;vertical-align: middle;">其他</text></view>
								<input type="text" name="other" :value="detail.other" style="float: left;height: 40rpx;line-height: 40rpx;border: 1px solid #ccc;border-radius: 10rpx;font-size: 24rpx;padding: 0 20rpx;margin-left: 20rpx;" placeholder="请输入补充信息">
							</label>
							<view style="clear: both;margin-bottom: 10rpx;"></view>
						</view>
						<view style="border: 1px solid #ccc;border-radius: 20rpx;padding: 10rpx 15rpx;font-size: 24rpx;margin-top: 20rpx;">
							<label style="margin-top: 20rpx;">
								<radio value="线下销售" :checked="detail.plat == '线下销售'" /><text style="margin-left: 10rpx;vertical-align: middle;">线下销售</text>
							</label>
						</view>
					</radio-group>
				</view>
				<view style="margin-top: 40rpx;">
					<view><text style="color: red;">*</text>您的姓名/Your Name</view>
					<input type="text" name="real_name" :value="detail.real_name" style="height: 65rpx;line-height: 65rpx;border: 1px solid #ccc;border-radius: 20rpx;margin-top: 20rpx;font-size: 24rpx;padding: 0 20rpx;">
				</view>
				<view style="margin-top: 40rpx;">
					<view><text style="color: red;">*</text>您的运营公司/Your Company</view>
					<input type="text" name="company" :value="detail.company" style="height: 65rpx;line-height: 65rpx;border: 1px solid #ccc;border-radius: 20rpx;margin-top: 20rpx;font-size: 24rpx;padding: 0 20rpx;">
				</view>
				<view style="margin-top: 40rpx;">
					<view><text style="color: red;">*</text>您的电话/Your Phone</view>
					<input type="text" name="phone" :value="detail.phone" style="height: 65rpx;line-height: 65rpx;border: 1px solid #ccc;border-radius: 20rpx;margin-top: 20rpx;font-size: 24rpx;padding: 0 20rpx;">
				</view>
				<view style="margin-top: 40rpx;">
					<view><text style="color: red;">*</text>您的邮箱/Your Email</view>
					<input type="text" name="email" :value="detail.email" style="height: 65rpx;line-height: 65rpx;border: 1px solid #ccc;border-radius: 20rpx;margin-top: 20rpx;font-size: 24rpx;padding: 0 20rpx;">
				</view>
				<view style="margin-top: 40rpx;">
					<view>您想怎么玩/Your Expected</view>
					<textarea maxlength="300" name="expected" :value="detail.expected" placeholder-style="font-size: 24rpx;" style="width: auto;height: 100rpx;border: 1px solid #ccc;border-radius: 20rpx;margin-top: 20rpx;font-size: 24rpx;padding: 10rpx 20rpx;" placeholder="请详细描述您的合作需求及具体形式,以便我们后期沟通!"/>
				</view>
				<view style="margin-top: 40rpx;text-align: center;">
					感谢您耐心填写表格，我们会第一时间联系您！
				</view>
				<button form-type="submit" style="font-size: 28rpx;width: 250rpx;height: 60rpx;line-height: 60rpx;margin: 20rpx auto;background: #282828;color: #fff;border-radius: 10rpx;text-align: center;">提交</button >
				<view style="width: 100%;height: 100rpx;"></view>
			</form>
		</view>
		<!-- #ifdef MP -->
		<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
		<!-- #endif -->
	</div>
</template>

<script>
	import {talentDetail,talent} from '@/api/user.js'
	import { checkPhone,isEmailAvailable } from '@/utils/validate.js'
	import {
		getconfig
	} from '@/api/public.js'
	import {
		mapGetters
	} from "vuex";
	// #ifdef MP
	import authorize from '@/components/Authorize';
	// #endif
	export default {
		components: {
			// #ifdef MP
			authorize,
			// #endif
		},
		data() {
			return {
				detail: {},
				talent_img: '../../../static/images/beijing.png',
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
			}
		},
		computed: mapGetters(['isLogin']),
		onLoad() {
			if (this.isLogin) {
				this.getDetail();
			} else {
				// #ifdef H5 || APP-PLUS
				toLogin();
				// #endif 
				// #ifdef MP
				this.isAuto = true;
				this.$set(this, 'isShowAuth', true)
				// #endif
			}
			// 获取配置
			getconfig().then(res => {
				this.talent_img = res.data.talent_img
			}).catch(err => {})
		},
		methods:{
			// 授权回调
			onLoadFun: function() {
				this.isShowAuth = false;
				this.getDetail();
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},
			getDetail() {
				talentDetail().then(res=>{
					if (res.data) {
						this.detail = res.data
					}
				})
			},
			// 下拉选中
			platChange(e){
				this.detail.plat = e.target.value;
			},
			// 提交反馈
			formSubmit(e){
				var formdata = e.detail.value;
				var detail = this.detail;
				detail.other = formdata.other;
				detail.real_name = formdata.real_name;
				detail.company = formdata.company;
				detail.phone = formdata.phone;
				detail.email = formdata.email;
				detail.expected = formdata.expected;
				if(!detail.plat){
					uni.showToast({
						title:'请选择销售方式',
						icon:'none'
					})
					return
				}
				if(detail.plat == '其他' && !detail.other){
					uni.showToast({
						title:'请填写其他平台信息',
						icon:'none'
					})
					return
				}
				if(!detail.real_name){
					uni.showToast({
						title:'请输入姓名',
						icon:'none'
					})
					return
				}
				if(!detail.company){
					uni.showToast({
						title:'请输入运营公司',
						icon:'none'
					})
					return
				}
				if(!checkPhone(detail.phone)){
					uni.showToast({
						title:'请输入正确电话',
						icon:'none'
					})
					return
				}
				if(!isEmailAvailable(detail.email)){
					uni.showToast({
						title:'请输入正确邮箱',
						icon:'none'
					})
					return
				}
				talent(detail).then(res=>{
					this.$util.Tips({
						title: '提交成功',
						icon: 'success'
					}, {
						tab: 3,
						url: 1
					});
				}).catch(error=>{
					this.$util.Tips({
						title:error
					})
				})
			}
		}
	}
</script>
